<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Chapter05</title>
    <script type="text/javascript" src="15-class.js"></script>
    <script type="text/javascript" src="11-addEvent.js"></script>
    <script>
    addEvent(window, "load", function() {
        addEvent(hasClass("insert")[0], "click", function() {
            myList.insert(document.getElementsByTagName("UL")[0], hasClass("test", "li")[1]);
        });

        addEvent(hasClass("append")[0], "click", function() {
            myList.append(document.getElementsByTagName("UL")[0]);
        });

        addEvent(hasClass("removeAll")[0], "click", function() {
            myList.removeAll(document.getElementsByTagName("UL")[0]);
        });
    });

    var myList = {
        num: 0,
        getNum: function() {
            return this.num++;
        },
        insert: function(target, exist) {
            var newItem = document.createElement("LI");
            var textNode = document.createTextNode("insertBefore" + '_' + this.getNum());
            newItem.appendChild(textNode);
            target.insertBefore(newItem, exist);
            this.addedLi.push(newItem);
        },
        append: function(target) {
            var newItem = document.createElement("LI");
            var textNode = document.createTextNode("appendChild" + '_' + this.getNum());
            newItem.appendChild(textNode);
            target.appendChild(newItem);
            this.addedLi.push(newItem);
        },
        addedLi: [],
        removeAll: function(target) {
            if (this.num = 0) return; 
            
            for (var i = 0; i < this.addedLi.length; i++) {
                target.removeChild(this.addedLi[i]);
            }
            this.num = 0;
            this.addedLi = [];
        }
    };
    </script>
</head>
<body>
    <h1>Introduction to the DOM</h1>
    <p class="test">There are a number of reasons why the DOM is awesome, here are some:</p>
    <button type="button" class="insert">insertBefore</button>
    <button type="button" class="append">appendChild</button>
    <button type="button" class="removeAll">removeAll</button>
    <ul>
        <li class="first" id="everywhere">It can be found everywhere.</li>
        <li class="test">It is easy to use.</li>
        <li class="test">It can help you to find what you want, really quickly.</li>
    </ul>
</body>
</html>